<template>
    <el-group-title>
        <template slot="groupTitle">
            <el-form
                :model="form"
                :rules="rules"
                ref="form"
                label-width="160px"
                class="ccui-form"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="填报单位：" prop="reportInOrgName">
                            <el-select
                                v-model="form.reportInOrgName"
                                class="ccui-form-longInput"
                                placeholder="请选择填报单位"
                                @change="handleReportInOrg"
                            >
                                <el-option
                                    v-for="item in reportInOrg"
                                    :key="item.orgId"
                                    :label="item.name"
                                    :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门：" prop="departName">
                            <el-select
                                ref="selectTree"
                                v-model="form.departName"
                                placeholder="请选择部门"
                                popper-class="popperTreeSelect"
                                style="width: 260px"
                            >
                                <el-option label="" value="">
                                    <el-tree
                                        :data="departOptions"
                                        :props="{ children: 'child', label: 'abbrName' }"
                                        @node-click="handleNodeClick"
                                    >
                  <span
                      :class="{
                      'depart-tree-node': form.departName === node.data.abbrName
                    }"
                      slot-scope="{ node }"
                  >
                    {{ node.data.abbrName }}
                  </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出库单编号：">
                            <el-input
                                v-model="form.exwarehouseCode"
                                class="ccui-form-longInput"
                                placeholder=""
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出库单名称：" prop="exwarehouseName">
                            <el-input
                                v-model="form.exwarehouseName"
                                class="ccui-form-longInput"
                                placeholder="请输入出库单名称"
                                maxlength="300"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="仓库：" prop="warehouseName">
                            <el-input
                                v-model="form.warehouseName"
                                placeholder="请选择仓库"
                                class="ccui-form-longInput"
                                disabled
                            ></el-input>
                            <el-button
                                plain
                                type="single-number"
                                style="margin-left: 10px"
                                @click="handleWarehouse"
                            >选择
                            </el-button
                            >
                        </el-form-item>
                    </el-col>
    
                    <el-col :span="12">
                        <el-form-item label="业务类型：" prop="businessTypeName">
                            <el-input class="ccui-form-longInput" placeholder="请选择业务类型" disabled v-model="form.businessTypeName"></el-input>
                            <el-button
                                plain
                                type="single-number"
                                style="margin-left: 10px"
                                @click="handleBusinessTypeClick"
                            >选择
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="本位币币种：" prop="standardMoney">
                            <el-input class="ccui-form-longInput" disabled v-model="form.standardMoney"></el-input>
                        </el-form-item>
                    </el-col>
    
                    <el-col :span="12">
                        <el-form-item label="附件张数：" prop="enclosureNumbers">
                            <el-input class="ccui-form-longInput" placeholder="请输入附件张数" v-model="form.enclosureNumbers"
                                      oninput="this.value=+(this.value.replace(/[^\d]/g,'')) === 0? '' : +(this.value.replace(/[^\d]/g,''))"></el-input>
    
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="分类名称：">
                            <el-input
                                v-model="form.categoryName"
                                class="ccui-form-longInput"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
    
                    <el-col :span="12">
                        <el-form-item label="出库数量：">
                            <el-input
                                v-model="form.exwarehouseCount"
                                class="ccui-form-longInput"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="出库金额：">
                            <el-input
                                v-model="form.exwarehouseMoney"
                                class="ccui-form-longInput"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="编制人：">
                            <el-input
                                v-model="form.reportUsername"
                                class="ccui-form-longInput"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
    
                    <el-col :span="12">
                        <el-form-item label="编制日期：">
                            <el-input
                                v-model="form.reportTime"
                                class="ccui-form-longInput"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="业务事由："
                            :title="form.businessRemarks"
                            prop="businessRemarks"
                        >
                            <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入业务事由"
                                v-model="form.businessRemarks"
                                maxlength="500"
                                show-word-limit
                                class="remarkClass"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="备注："
                            :title="form.remark"
                        >
                            <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入备注"
                                v-model="form.remark"
                                maxlength="500"
                                show-word-limit
                                class="remarkClass"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <warehouseDialog
                @numrow="numrow"
                :reportInOrgName="form.reportInOrgName"
                :reportInOrgId="form.reportInOrgId"
                :isTrue="false"
                ref="warehouseDialog"
            />
    
            <contractDialog
                ref="contractDialog"
                :dialog-data="dialogData"
                :table-data="dialogData.tableData"
                @handlePageChange="handlePageChange"
                @search="search"
                @reset="reset"
                @getDialogTableData="getDialogTableData"
            />
        </template>
    </el-group-title>
</template>

<script>
import {getUserInfoA, getListUserPartJobComInfo, qryUnderOrg} from "@/basa/api";
import warehouseDialog from "../components/warehouseDialog"
import contractDialog from "@/basa/components/public_practice/contractDialog";
import {listSmpEquipmentForScPage} from "@/app/settlement-management/equipment/api";

export default {
    data() {
        return {
            dialogData: {
                title: "业务类型",
                tableData: [],
                searchData: [
                    {
                        label: "编码",
                        models: "contractCode"
                    },
                    {
                        label: "业务类型",
                        models: "partyBName"
                    }
                ],
                tableTheadOptions: [
                    {label: "编码",prop: "contractCode",  width: "200"},
                    {label: "业务类型",prop: "formalContractCode",  width: "200"},
                    // {label: "合同名称", prop: "contractName"},
                    // {label: "签订单位", prop: "partyAName"},
                    // {label: "供应商", prop: "partyBName"},
                    // {label: "填报单位", prop: "reportInOrgName"},
                    // {label: "生效日期", prop: "enabledDate"}
                ],
                pages: {
                    total: 0,
                    pageNo: 1,
                    pageSize: 10
                }
            },
            form: {
                categoryName: "",
                categoryCode: "",
                warehouseId: "",
                exwarehouseCount: "",
                exwarehouseMoney: "",
                warehouseName: "",
                reportInOrgName: "",
                reportInOrgId: null,
                reportUsername: "",
                reportOpenid: "",
                reportTime: "",
                remark: "",
                departName: "",
                departId: "",
                departCode: "",
                businessTypeCode: "22",
                businessTypeName: "111",
                standardMoney: "11",
                standardMoneyCode: "22",
                enclosureNumbers: "11",
                businessRemarks: "22",
                projectCode: "111",
                projectName: "22"
            },
            formClone: {},
            reportInOrg: [],
            rules: {
                reportInOrgName: [
                    {required: true, message: "请选择填报单位", trigger: "change"}
                ],
                warehouseName: [
                    {required: true, message: "请选择仓库", trigger: "change"}
                ],
                exwarehouseName: [
                    {required: true, message: "请输入出库单名称", trigger: "blur"}
                ],
                departName: [
                    {required: true, message: "请选择部门", trigger: "change"}
                ],
                businessTypeName: [
                    {required: true, message: "请选择业务类型", trigger: "change"}
                ],
                standardMoney: [
                    {required: true, message: "本位币币种不能为空", trigger: "change"}
                ],
                enclosureNumbers: [
                    {required: true, message: "请输入附件张数", trigger: "blur"}
                ],
                // categoryName: [
                //     {required: true, message: "分类名称不能为空", trigger: "change"}
                // ],
                businessRemarks: [
                    {required: true, message: "请输入业务事由", trigger: "blur"}
                ]
            },
            departOptions: []
        };
    },
    components: { warehouseDialog, contractDialog },
    props: {
        basicInfo: {
            type: Object,
            default() {
                return {};
            }
        },
        exwarehouseMoneySum: {
            type: String,
            default() {
                return "";
            }
        },
        exwarehouseCountSum: {
            type: String,
            default() {
                return "";
            }
        },
        categoryName: {
            type: String,
            default() {
                return "";
            }
        },
        categoryCode: {
            type: String,
            default() {
                return "";
            }
        },
        basicInformation: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    
    watch: {
        exwarehouseCountSum(data) {
            this.form.exwarehouseCount = data
        },
        exwarehouseMoneySum(data) {
            this.form.exwarehouseMoney = data
        },
        categoryName(data) {
            this.form.categoryName = data
        },
        categoryCode(data) {
            this.form.categoryCode = data
        },
        basicInformation(data) {
            this.form = data
            if (this.$route.query.ifAdd == 2) {
                this.formClone = JSON.parse(JSON.stringify(this.form))
            }
        },
        //仓库id
        "form.warehouseId": {
            handler: function (data) {
                if (data) {
                    this.$emit('warehouseId', data + "");
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.form.reportTime = this.getDate()//当前时间
        if (this.$route.query.ifAdd == 1) {
            getUserInfoA({isShowPageLoading:true}).then(res => {
                if (res.data.code == 0) {
                    this.form.reportUsername = res.data.data.userInfo.name;
                    this.form.reportOpenid = res.data.data.userInfo.id
                    let openIds = [res.data.data.userInfo.openId];
                    getListUserPartJobComInfo({openIds: openIds}).then(res => {
                        if (res.data.code == 0) {
                            this.reportInOrg = res.data.data[openIds];
                            if (this.$route.query.ifAdd == 1) {//1代表新增
                                this.form.reportInOrgName = res.data.data[openIds][0].name;
                                this.form.reportInOrgId = res.data.data[openIds][0].orgId;
                                this.getDepartment(this.form.reportInOrgId);
                            }
                            
                        }
                    });
                }
            });
        } else {
            getUserInfoA({isShowPageLoading:true}).then(res => {
                if (res.data.code == 0) {
                    this.form.reportUsername = res.data.data.userInfo.name;
                    this.form.reportOpenid = res.data.data.userInfo.id
                    let openIds = [res.data.data.userInfo.openId];
                    getListUserPartJobComInfo({openIds: openIds}).then(res => {
                        if (res.data.code == 0) {
                            this.reportInOrg = res.data.data[openIds];
                        }
                    });
                }
            });
            // 编辑时候更新部门数据
            this.getDepartment(this.form.reportInOrgId);
        }
    },
    methods: {
        handleBusinessTypeClick() {
            this.$refs["contractDialog"].dialogVisible = true;
            console.log(111)
            this.getContractList();
        },
        // 获取合同编号数据
        getContractList(data) {
            let params = {
                ...data,
                reportOrgId: this.form.reportInOrgId,
                pageNo: this.dialogData.pages.pageNo,
                pageSize: this.dialogData.pages.pageSize
            };
            listSmpEquipmentForScPage(params).then(res => {
                let result = res.data.data;
                result.rows.map(item => item.enabledDate = item.enabledDate.substr(0,10));
                this.dialogData.tableData = result.rows;
                this.dialogData.pages.pageNo = result.pageNo;
                this.dialogData.pages.total = result.recordsTotal;
            });
        },
        // 分页 - 切换每页总条数 与 页数
        handlePageChange(val, type) {
            if (type === 'current') {
                this.dialogData.pages.pageNo = val;
                this.getContractList();
            } else if (type === 'size') {
                this.dialogData.pages.pageSize = val;
                this.getContractList();
            }
        },
        search(searchData) {
            this.getContractList(searchData);
        },
        // 分页重置
        reset() {
            this.dialogData.pages.pageNo= 1;
            this.dialogData.pages.pageSize= 10;
            this.getContractList();
        },
        getDialogTableData() {},
        async getDepartment(parentId) {
            const {
                child,
                child: [{id, abbrName, autoCode}]
            } = (
                await qryUnderOrg({
                    parentId, // 全局 其他【此组件是本级及以下】
                    flag: "1" // 0 公司 1 部门 2 成员
                })
            ).data.data[0];
            this.departOptions = child;
            // 默认第一个部门
            this.form.departId = id;
            this.form.departName = abbrName;
            this.form.departCode = autoCode;
        },
        // 部门选中的数据
        handleNodeClick({id, abbrName, autoCode}) {
            this.form.departId = id;
            this.form.departName = abbrName;
            this.form.departCode = autoCode;
            this.$refs.selectTree.blur();
        },
        // 获取时间方法
        getDate() {
            let date = new Date();
            let seperator1 = "-";
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        },
        //填报单位
        handleReportInOrg(data) {
            this.form.reportInOrgId = this.reportInOrg.filter(item => {
                return item.name === data;
            })[0].orgId;
            if (this.form.reportInOrgName !== this.formClone.reportInOrgName) {
                this.form.warehouseName = "";
                this.form.warehouseId = "";
                this.form.categoryName = "";
                this.form.exwarehouseCount = "";
                this.form.exwarehouseMoney = ""
                this.getDepartment(this.form.reportInOrgId);
                this.$emit('changeTianbaodanwei', 1);
                this.$nextTick(() => {
                    this.$refs.form.clearValidate();
                });
            } else {
                this.form = JSON.parse(JSON.stringify(this.formClone))
                this.$emit('changeTianbaodanwei', 2);
            }
        },
        //打开仓库
        handleWarehouse() {
            if (this.$refs.warehouseDialog.reportInOrgId) {
                this.$refs.warehouseDialog.dialogVisible = true;
                this.$refs.warehouseDialog.getContractList(this.$refs.warehouseDialog.formData);
            } else {
                this.$message.warning("等待填报单位加载完成");
            }
        },
        //选择仓库
        numrow(data) {
            this.form.warehouseId = data.id;
            let resultArr = ["warehouseName", "standardMoney", "standardMoneyCode", "projectCode", "projectName"];
            
            resultArr.map(e => {
               this.form[e] = data[e];
            });
    
            if (this.form.warehouseId != this.formClone.warehouseId) {
                this.$emit('changCangku', 1);
            } else {
                this.$emit('changCangku', 2);
            }
        },
        // 验证必填项
        validateBaseinfo() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    this.$nextTick(() => {
                        const errorFormEl = document.body.querySelectorAll(".is-error");
                        if (errorFormEl[0])
                            document.documentElement.scrollTop = errorFormEl[0].offsetTop;
                    });
                }
                this.$emit("isValid", valid);
            });
        },
    }
};
</script>

<style scoped lang="scss">
/deep/ .el-button--single-number {
    width: 46px;
    margin-left: 10px;
    padding: 0 9px;
}

/deep/ .ccui-pre-form-item {
    .el-form-item__label {
        line-height: 16px;
    }
}

.remarkClass {
    width: calc(50% + 350px);
}

///deep/ .el-input--suffix {
//    width: 260px;
//}

</style>
